<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>TODO List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task" required>
    <button id="addTaskButton">Add</button>
    <button id="deleteAllButton">Delete All</button>
    <ul id="taskList"></ul>

    <script>
        const taskInput = document.getElementById('taskInput');
        const addTaskButton = document.getElementById('addTaskButton');
        const deleteAllButton = document.getElementById('deleteAllButton');
        const taskList = document.getElementById('taskList');

        // Fetch tasks from the server
        async function fetchTasks() {
            const response = await fetch('/routes/tasks');
            const tasks = await response.json();
            renderTasks(tasks);
        }

        // Render tasks in the list
        function renderTasks(tasks) {
            taskList.innerHTML = '';
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.textContent = task.text;
                li.dataset.id = task.id;

                const editButton = document.createElement('button');
                editButton.textContent = 'Edit';
                editButton.onclick = () => editTask(task.id);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.onclick = () => deleteTask(task.id);

                li.appendChild(editButton);
                li.appendChild(deleteButton);
                taskList.appendChild(li);
            });
        }

        // Add a new task
        addTaskButton.onclick = async () => {
            const text = taskInput.value;
            if (text) {
                await fetch('/api/tasks', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ text, user_id: 1 }) // Assuming user_id is 1 for now
                });
                taskInput.value = '';
                fetchTasks();
            }
        };

        // Edit a task
        async function editTask(id) {
            const newText = prompt('Edit task:');
            if (newText) {
                await fetch(`/api/tasks/${id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ text: newText })
                });
                fetchTasks();
            }
        }

        // Delete a task
        async function deleteTask(id) {
            await fetch(`/api/tasks/${id}`, {
                method: 'DELETE'
            });
            fetchTasks();
        }

        // Delete all tasks
        deleteAllButton.onclick = async () => {
            const tasks = await fetch('/api/tasks');
            const tasksData = await tasks.json();
            for (const task of tasksData) {
                await deleteTask(task.id);
            }
        };

        // Initial fetch of tasks
        fetchTasks();
    </script>
</body>
</html>